<template>
  <el-card class="login-form-body form-group">
    <el-form ref="formData" :rules="rules" :model="user" label-position="top" label-width="50px">
      <el-form-item label="账户:" class="login-label"  prop="account">
        <el-input placeholder="请输入手机号或者邮箱" class="login-input" v-model="user.account" clearable/>
      </el-form-item>
      <el-form-item label="密码:" prop="password" class="login-label" >
        <el-input placeholder="请输入密码" class="login-input" v-model="user.password" type='password' clearable/>
      </el-form-item>
      <el-form-item label="重复密码:" class="login-label" prop="repeatPassword">
        <el-input type='password' class="login-input" placeholder="请重复输入密码" v-model="user.repeatPassword" clearable/>
      </el-form-item>
      <el-form-item v-if="user.isShow" label="验证码:" class="login-label" prop="identityCode">
        <el-input placeholder="请输入验证码" class="login-input identityCode" v-model="user.identityCode" clearable/>
        <el-button type="primary" class="btn reset-label">重新发送</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="user.identityCode" type="primary" class="btn login-label" @click="register('formData')">确认</el-button>
        <el-button v-else type="primary" class="btn login-label" @click="register('formData')">注册</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { getIdentityCode, register } from '@/services/login/register'
import {
  regexIdentityCode,
  regexPhone,
  validateRepeatPassword,
  validatorAccount,
  validatorPassword
} from '@/script/login/LoginOrRegister'

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Register',
  data () {
    // 验证常量
    const validatorRepeatPassword = (rule, value, callback) => {
      return callback(validateRepeatPassword(this.user.password, value))
    }
    return {
      user: {
        account: '',
        password: '',
        repeatPassword: '',
        identityCode: '',
        isShow: false
      },
      rules: {
        account: [
          { required: true, validator: validatorAccount, trigger: 'change' }
        ],
        password: [
          { required: true, validator: validatorPassword, trigger: 'change' }
        ],
        repeatPassword: [
          { required: true, validator: validatorRepeatPassword, trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    // 注册账号
    register: async function (formData) {
      let failValidate = false
      await this.$refs[formData].validate(valid => {
        if (!valid) {
          this.$message.error('您输入的格式有误，请仔细检查')
          failValidate = true
        }
      })
      if (failValidate) return
      // 用户注册数据
      let phone, email
      // 赋值
      (regexPhone.test(this.user.account) && (phone = this.user.account)) || (email = this.user.account)
      // 如果是邮箱，且尚未输入验证码
      if (email && !this.user.isShow && !this.user.identityCode) {
        const x = {
          requestMessage: {
            to: [
              email
            ]
          },
          type: 'mail'
        }
        const data = JSON.stringify(x)
        await getIdentityCode(data).then((res) => {
          if (res.code !== 10000) {
            this.$message.error(res.explanation)
            return
          }
          this.$message.success('验证码已发送')
          this.user.isShow = true
        })
        return
      }
      if (!regexIdentityCode.test(this.user.identityCode)) {
        this.$message.error('验证码错误')
        return
      }
      const data = {
        userAccount: {
          value: email || phone,
          password: this.user.password
        },
        identityCode: this.user.identityCode
      }
      const userInfo = JSON.stringify(data)
      register(userInfo).then((res) => {
        const code = res.code
        // 判断是否显示已注册
        if (code !== 10000) {
          this.$message.error(res.explanation)
          return
        }
        this.$message.success('注册成功')
        this.$router.push({ path: '/login' })
      })
    }
  }
}
</script>
